<!doctype html>
<html>
<head>
<meta charset="gbk" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="generator" content="macvim" />
<meta name="author" content="http://fisherhe.com (heqiang.org@gmail.com)" />
<title>tab-demo</title>
<link rel="stylesheet" href="css/tab.css"  type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div class="tab">
	<div class="hd">
		<ul>
			<li class="current">tab1</li>
			<li>tab2</li>
			<li>tab3</li>
		</ul>
	</div>
	<div class="bd">
		<p class="current">111</p>
		<p>222</p>
		<p>333</p>
	</div>
</div>
<script type="text/javascript">


// code-4 再进一步，sibling()方法效率太低，稍做改进
function slider(hdel,bdel,evt,cls){
	var lastCurrent = 0;
	$(hdel).bind(evt, function() {
		$(this).addClass(cls);
		$(hdel).eq(lastCurrent).removeClass(cls);
		
		$(bdel).eq($(this).index()).addClass(cls);
		$(bdel).eq(lastCurrent).removeClass(cls);

		lastCurrent = $(this).index();
	});
}
slider(".tab .hd ul li",".tab .bd p","mouseover","current");



/*
// code-3 进一步封装，启用bind()事件绑定
function slider(hdel,bdel,evt,cls){
	$(hdel).bind(evt, function() {
		$(this).addClass(cls).siblings().removeClass(cls);
		$(bdel).eq($(this).index()).addClass(cls).siblings().removeClass(cls);
	});
}
slider(".tab .hd ul li",".tab .bd p","mouseover","current");
*/


/*
// code-2 简单封装
function slider(hdel,bdel){
	$(hdel).mouseover(function(){
		$(this).addClass("current").siblings().removeClass("current");
		$(bdel).eq($(this).index()).addClass("current").siblings().removeClass("current");
	});
}
slider(".tab .hd ul li",".tab .bd p");
*/


/*
// cdoe-1
	$(".tab .hd ul li").mouseover(function(){
		$(this).addClass("current").siblings().removeClass("current");
		$(".tab .bd p").eq($(this).index()).addClass("current").siblings().removeClass("current");
	});
*/


</script>
</body>
</html>

